<template>
  <div>
    <div>
      <h1>这是用户管理页面</h1>
      <p></p>
      <button v-on:click="getAllUsers">获取所有用户</button>
      <div v-for="student in students" v-bind:key = student.id>
        {{student}}
      </div>
      <p></p>
      <div>
        请输入要查询的用户信息的id:
        <input v-model="queryId">
      </div>
      <button v-on:click="getUserById">通过id获取指定用户</button>
      <div>{{studentById}}</div>
    </div>
    <p></p>
    <div>
      请输入要添加的用户信息：
      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        classname
        <input v-model="classname">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addUser">添加用户</button>
    <p></p>
    <div>
      请输入要修改的用户信息：
      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        classname
        <input v-model="classname">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="updateUser">修改用户</button>
    <p></p>
    <div>
      请输入删除用户的id：
      <input v-model = "deleteId">
      <div>
        <button v-on:click="deleteUser">删除用户</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      students: null,
      queryId: null,
      studentById: null,
    }
  },
  methods: {
    getAllUsers() {
      axios.get("http://localhost:8081/students").then(resp => {
        console.log(resp);
        this.students = resp.data;
      })
    },
    getUserById() {
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.studentById = resp.data;
          })
    },
    addUser() {
      axios.post("http://localhost:8081/student",
          {
            student_id:this.student_id,
            name:this.name,
            classname:this.classname,
            telephone:this.telephone,
            qq:this.qq
          }).then(resp => {
        console.log(resp);
      })
    },
    updateUser() {
      axios.put("http://localhost:8081/student", {
        student_id:this.student_id,
        name:this.name,
        classname:this.classname,
        telephone:this.telephone,
        qq:this.qq
      }).then(resp => {
        console.log(resp);
      })
    },
    deleteUser() {
      axios.delete("http://localhost:8081/student", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    }
  }
}
</script>

<style scoped>

</style>